<template>
	<div class="">
		<div class="topImg">
			<div class="title">
				<div>{{chirlData[0].name}}</div>
				<img src="../assets/tline.svg" style="width: 60px;height: 4px;" />
			</div>
		<!-- 	<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>首页</el-breadcrumb-item>
				<el-breadcrumb-item v-for="item in breadCrumb">
					<span class="isLink">{{item.meta.title}}</span>
				</el-breadcrumb-item>
			</el-breadcrumb> -->
		</div>
		<div class="m1200">
		<div class="neiRonBox over">
			<div class="neiRonDetail fl">
				<div class="neiRonList over">
					<ul v-for="(item,key) in newsList" :key="key">
							<router-link :to="'/listInfo/'+item.id" v-if="item.articleType == 0">
							<li>
								<div class="listBox">
									<p class="title">{{item.title}}</p>
									<p class="wzTime">{{item.issueTime}}</p>
								</div>
							</li>
							</router-link>
							<a :href="item.customContentView" target="_blank"  v-else-if="item.articleType == 2">
							<li>
								<div class="listBox">
									<p class="title">{{item.title}}</p>
									<p class="wzTime">{{item.issueTime}}</p>
								</div>
							</li>
							</a>
					</ul>
				</div>
				<!--分页-->
				<el-pagination background @current-change='currentChange' layout="prev, pager, next, total"
					:total="total">
				</el-pagination>
			</div>
			<div class="frNav fr" v-for="item in chirlData" v-if="judge=='0'">
				<div class="rTit">
					<p>{{item.name}}</p>
				</div>
				<div class="menu-cen">
					<el-menu mode="vertical" background-color="#ffffff" text-color="#000000" active-text-color="#ffffff"
						border-bottom="none" router :default-active="$route.path" class="el-menu-demo">
						<template v-for="item in item.children">
							<template>
								<el-menu-item :index="/news/+item.id" style="padding: 0 0px !important;">
									<div class="navTit">
										{{item.name}}
									</div>
								</el-menu-item>
							</template>
						</template>
					</el-menu>
				</div>
			</div>
		</div>
		</div>
	</div>
</template>

<script>
	import vueSeamlessScroll from 'vue-seamless-scroll'
	export default {
		name: 'Home',
		components: {
			vueSeamlessScroll
		},
		data() {
			return {
				newsList: [],
				pageNo: 1,
				pageSize: 10,
				emps: [],
				total: 0,
				chirlData:[],
				judge:1,
			}
		},
		filters: {

		},
		created() {
			console.log('news')
			this.getNewslist()
			this.getRightMenu();
			this.windowWidth = window.innerWidth;
			if (this.windowWidth < 1200) {
				this.judge = 1
			} else {
				this.judge = 0
			}
		},
		mounted() {
			this.getNewslist()
			this.initEmps()
		},
		beforeDestroy() {},
		methods: {
			getNewslist() {
				var id = this.$route.params.id;
				// var id = 10;
				var api = 'base/basepcInfo/categoryByIdList?id=' + id + '&pageNo=' + this.pageNo + '&pageSize=' + this
					.pageSize;
				this.$axios.get(api)
					.then((res) => {
						this.emps = res.data.result;
						this.total = res.data.result.total;
						this.newsList = res.data.result.records;
						console.log('new', res)
						// this.newsList.forEach((key) => {
						// 	key.image = 'https://tonisoft.hy2w.com/toniboot/sys/common/static/' + key.image
						// 	key.issueDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(key.issueDate)[0]
						// })
					})
			},
			getRightMenu() {
				var id = this.$route.params.id;
				var api = '/base/basepcInfo/getIndustryNewsZx?pid=' + id;
				this.$axios.get(api)
					.then((res) => {
						this.chirlData = res.data.result;
						console.log('getIndustryNewsZx',res)
					})
			},
			currentChange(currentPage) {
				this.pageNo = currentPage;
				this.getNewslist();
			},
			initEmps() {
				this.pageNo = 1
				this.getNewslist()
				this.getRightMenu();
			}
		},
		computed: {
			// breadCrumb() {
			// 	console.log('breadCrumb',this.$route.matched)
			// 	return this.$route.matched;
			// },

		},
		watch: {
			// 如果路由有变化，会再次执行该方法
			'$route': 'initEmps'
		},
	}
</script>

<style>
	@media screen and (max-width:539px) {
		.topImg {
			background-image: url(../assets/lm-ban2.jpg);
			background-position: 10%;
			width: 100%;
			height: 10vh;
			color: #fff;
			position: relative;
		}
		.topImg .title {
			font-size: 16px;
			font-weight: bold;
			line-height: 20px;
			position: absolute;
			top: 40%;
			left: 6%;
		}
		.m1200{
			width: 360px !important;
		}
		.neiRonBox{
			width: 360px;
		}
		
		.el-breadcrumb__item {
			line-height: 44px;
			font-size: 16px;
			border-bottom: 4px solid #b80101;
			color: rgba(0, 0, 0, 0.7);
		}
		
		.isLink {
			color: #b80101 !important;
		}
		
		.neiRonDetail {
			width: 380px;
			min-height: 500px;
		}
		
		.frNav {
			width: 120px;
			height: auto;
			padding: 6px 6px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 2px;
			box-shadow: 0 2px 10px 0 rgb(213 213 213 / 50%);
			margin-top: 15px;
			margin-right: 1%;
		}
		
		.neiRonList ul li {
			border-bottom: 1px solid #ececec;
		}
		
		.listBox {
			height: 58px;
			line-height: 58px;
			overflow: hidden;
		}
		
		.listBox .title {
			width: 240px;
			float: left;
			font-size: 14px;
			color: #373737;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.listBox .title:hover{
			color: #b80101;
		}
		.listBox .wzTime {
			width: 100px;
			float: left;
			font-size: 12px;
			color: rgba(48, 48, 48, 0.5);
			text-align: right;
		}
		.menu-cen .navTit{
			text-align: center;
		}
		.rTit{
			border-top: 3px solid #b80101;
			text-align: center;
		}
		.rTit p{
			line-height: 50px;
			height: 50px;
			color: #b80101;
		}
		/*分页*/
		.page-bar {
			margin: 40px auto;
			margin-top: 150px;
		
		}
		.el-menu-item{
			padding-left: 0!important;
		}
		.el-menu{
			border-right: 0!important;
		}
		.el-menu-item.is-active{
			/* background-color: #b80101 !important; */
		}
		ul,
		li {
			margin: 0px;
			padding: 0px;
		}
		
		li {
			list-style: none
		}
		
		.page-bar li:first-child>a {
			margin-left: 0px
		}
		
		.page-bar a {
			border: 1px solid #ddd;
			text-decoration: none;
			position: relative;
			float: left;
			padding: 6px 12px;
			margin-left: -1px;
			line-height: 1.42857143;
			color: #5D6062;
			cursor: pointer;
			margin-right: 20px;
		}
		
		.page-bar a:hover {
			background-color: #eee;
		}
		
		.page-bar a.banclick {
			cursor: not-allowed;
		}
		
		.page-bar .active a {
			color: #fff;
			cursor: default;
			background-color: #E96463;
			border-color: #E96463;
		}
		
		.page-bar i {
			font-style: normal;
			color: #d44950;
			margin: 0px 4px;
			font-size: 12px;
		}
		
	}

@media screen and (min-width:540px) and (max-width:969px) {
		.topImg {
			background-image: url(../assets/lm-ban2.jpg);
			background-position: 10%;
			width: 100%;
			height: 20vh;
			color: #fff;
			position: relative;
		}
		.topImg .title {
			font-size: 36px;
			font-weight: bold;
			line-height: 20px;
			position: absolute;
			top: 40%;
			left: 6%;
		}
		.m1200{
			width: 80% !important;
		}
		.neiRonBox{
			width: 100%;
		}
		
		.el-breadcrumb__item {
			line-height: 44px;
			font-size: 16px;
			border-bottom: 4px solid #b80101;
			color: rgba(0, 0, 0, 0.7);
		}
		
		.isLink {
			color: #b80101 !important;
		}
		
		.neiRonDetail {
			width: 100%;
			min-height: 500px;
		}
		
		.frNav {
			width: 205px;
			height: auto;
			padding: 6px 6px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 2px;
			box-shadow: 0 2px 10px 0 rgb(213 213 213 / 50%);
			margin-top: 15px;
			margin-right: 1%;
		}
		
		.neiRonList ul li {
			border-bottom: 1px solid #ececec;
		}
		
		.listBox {
			height: 58px;
			line-height: 58px;
			overflow: hidden;
		}
		
		.listBox .title {
			width: calc(100% - 100px);
			float: left;
			font-size: 16px;
			color: #373737;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.listBox .title:hover{
			color: #b80101;
		}
		.listBox .wzTime {
			width: 100px;
			float: left;
			font-size: 14px;
			color: rgba(48, 48, 48, 0.5);
			text-align: right;
		}
		.menu-cen .navTit{
			text-align: center;
		}
		.rTit{
			border-top: 3px solid #b80101;
			text-align: center;
		}
		.rTit p{
			line-height: 50px;
			height: 50px;
			color: #b80101;
		}
		/*分页*/
		.page-bar {
			margin: 40px auto;
			margin-top: 150px;
		
		}
		.el-menu-item{
			padding-left: 0!important;
		}
		.el-menu{
			border-right: 0!important;
		}
		.el-menu-item.is-active{
			/* background-color: #b80101 !important; */
		}
		ul,
		li {
			margin: 0px;
			padding: 0px;
		}
		
		li {
			list-style: none
		}
		
		.page-bar li:first-child>a {
			margin-left: 0px
		}
		
		.page-bar a {
			border: 1px solid #ddd;
			text-decoration: none;
			position: relative;
			float: left;
			padding: 6px 12px;
			margin-left: -1px;
			line-height: 1.42857143;
			color: #5D6062;
			cursor: pointer;
			margin-right: 20px;
		}
		
		.page-bar a:hover {
			background-color: #eee;
		}
		
		.page-bar a.banclick {
			cursor: not-allowed;
		}
		
		.page-bar .active a {
			color: #fff;
			cursor: default;
			background-color: #E96463;
			border-color: #E96463;
		}
		
		.page-bar i {
			font-style: normal;
			color: #d44950;
			margin: 0px 4px;
			font-size: 12px;
		}


	}
	@media screen and (min-width:970px) {
		.topImg {
			background-image: url(../assets/lm-ban2.jpg);
			background-position: 10%;
			width: 100%;
			height: 20vh;
			color: #fff;
			position: relative;
		}
		.topImg .title {
			font-size: 36px;
			font-weight: bold;
			line-height: 20px;
			position: absolute;
			top: 40%;
			left: 6%;
		}
		
		.neiRonBox{
			width: 1200px;
		}
		
		.el-breadcrumb__item {
			line-height: 44px;
			font-size: 16px;
			border-bottom: 4px solid #b80101;
			color: rgba(0, 0, 0, 0.7);
		}
		
		.isLink {
			color: #b80101 !important;
		}
		
		.neiRonDetail {
			width: 920px;
			min-height: 500px;
		}
		
		.frNav {
			width: 205px;
			height: auto;
			padding: 6px 6px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 2px;
			box-shadow: 0 2px 10px 0 rgb(213 213 213 / 50%);
			margin-top: 15px;
			margin-right: 1%;
		}
		
		.neiRonList ul li {
			border-bottom: 1px solid #ececec;
		}
		
		.listBox {
			height: 58px;
			line-height: 58px;
			overflow: hidden;
		}
		
		.listBox .title {
			width: 781px;
			float: left;
			font-size: 16px;
			color: #373737;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.listBox .title:hover{
			color: #b80101;
		}
		.listBox .wzTime {
			width: 100px;
			float: left;
			font-size: 14px;
			color: rgba(48, 48, 48, 0.5);
			text-align: right;
		}
		.menu-cen .navTit{
			text-align: center;
		}
		.rTit{
			border-top: 3px solid #b80101;
			text-align: center;
		}
		.rTit p{
			line-height: 50px;
			height: 50px;
			color: #b80101;
		}
		/*分页*/
		.page-bar {
			margin: 40px auto;
			margin-top: 150px;
		
		}
		.el-menu-item{
			padding-left: 0!important;
		}
		.el-menu{
			border-right: 0!important;
		}
		.el-menu-item.is-active{
			/* background-color: #b80101 !important; */
		}
		ul,
		li {
			margin: 0px;
			padding: 0px;
		}
		
		li {
			list-style: none
		}
		
		.page-bar li:first-child>a {
			margin-left: 0px
		}
		
		.page-bar a {
			border: 1px solid #ddd;
			text-decoration: none;
			position: relative;
			float: left;
			padding: 6px 12px;
			margin-left: -1px;
			line-height: 1.42857143;
			color: #5D6062;
			cursor: pointer;
			margin-right: 20px;
		}
		
		.page-bar a:hover {
			background-color: #eee;
		}
		
		.page-bar a.banclick {
			cursor: not-allowed;
		}
		
		.page-bar .active a {
			color: #fff;
			cursor: default;
			background-color: #E96463;
			border-color: #E96463;
		}
		
		.page-bar i {
			font-style: normal;
			color: #d44950;
			margin: 0px 4px;
			font-size: 12px;
		}


	}
</style>